<template>
  <div class="home">
    <div class="logo">
      <i class="iconfont icon-wangyiyunyinle"></i>
    </div>

    <div class="login_btn">
      <van-button
        round
        type="default"
        size="large"
        color="#fff"
        @click="toLogonPhone"
        >手机号登录</van-button
      >
      <van-button round type="default" size="large" @click="toIndex"
        >立即体验</van-button
      >
      <div class="loginIcon">
        <div class="iconList">
          <i class="iconfont icon-weixin"></i>
          <i class="iconfont icon-QQ"></i>
          <i class="iconfont icon-weibo"></i>
          <i class="iconfont icon-yi"></i>
        </div>
        <div :class="animations ? 'alert animation' : 'alert'">
          请先勾选同意《用户协议》《隐私政策》《儿童隐私政策》《中国联通认证服务协议》
        </div>
      </div>

      <div
        :class="
          animations ? 'bottom_hint botton_hint_animation' : 'bottom_hint'
        "
      >
        <div>
          <van-radio-group v-model="radio">
            <van-radio
              name="1"
              shape="square"
              @click="clickRadio($event)"
              icon-size="15PX"
              checked-color="#dc2c1f"
            ></van-radio>
          </van-radio-group>

          <span>同意</span>
          <a href="#">《用户协议》</a>
          <a href="#">《隐私政策》</a>
          <a href="#">《儿童隐私政策》</a>
        </div>

        <div>
          <a href="#">《中国联通认证服务协议》</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      radio: "2",
      radios: "2",
      animations: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //点击协议按钮
    clickRadio() {
      let num = this.radios;
      let newNum = num == "1" ? "2" : "1";
      this.radio = newNum;
      this.radios = newNum;
    },
    //立即体验
    toIndex() {
      this.toPage("index")
    },
    //手机号登录
    toLogonPhone() {
      this.toPage("loginPhone")
    },

    toPage(path) {
      if (this.radios === "1") {
        this.$router.push({ path: "/" + path });
      } else {
        this.animations = true;
        setTimeout(() => {
          this.animations = false;
        }, 2000);
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss">
.home {
  width: 100%;
  height: 100%;
  background-color: #dc2c1f;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .logo {
    height: 70px;
    width: 70px;
    background-color: #f12a25;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 120px;
    .iconfont {
      font-size: 42px;
      color: #ffffff;
    }
  }
  .login_btn {
    width: 260px;
    .van-button:nth-child(odd) {
      color: #dc2c1f !important;
    }
    .van-button:nth-child(even) {
      background-color: transparent;
      margin-top: 15px;
      border: 1px solid rgba($color: #e25046, $alpha: 0.9);
      color: #fff !important;
    }
    .van-button {
      height: 39px;
    }
    .loginIcon {
      position: relative;
      .iconList {
        width: 100%;
        height: 85px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .iconfont {
          font-size: 34px;
          color: #fff;
        }
      }
      .alert {
        background-color: #d9d1cf;
        padding: 9px 16px 7px 16px;
        border-radius: 15px;
        opacity: 0;
        position: absolute;
        top: 10px;
        left: 0;
      }
      .animation {
        animation: identifier 3s linear 0s 1;
      }
      @keyframes identifier {
        0% {
          opacity: 0;
        }
        20% {
          opacity: 1;
        }
        80% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
    }
    .bottom_hint {
      font-size: 12px;
      transform: scale(0.8);
      margin: 0 0 19px 0;

      div:nth-child(1) {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
      }
      div:nth-child(2) {
        text-align: center;
      }
      .van-radio-group {
        display: inline-block;
      }
      a {
        font-size: 12PX;
        color: #ffd1cd;
        white-space: nowrap;
      }
      span {
        font-size: 12PX;
        color: #fd786f;
        white-space: nowrap;
        margin-left: 7px;
      }
    }
    .botton_hint_animation {
      animation: shake 2s linear;
    }
    @keyframes shake {
      0%,
      100% {
        transform: rotate(0deg) scale(0.8);
      }

      10% {
        transform: rotate(2deg);
        transform: scale(1);
      }

      15%,
      25%,
      35% {
        transform: rotate(-4deg);
      }

      20%,
      30%,
      40% {
        transform: rotate(4deg);
      }

      45% {
        transform: rotate(-2deg);
      }

      50% {
        transform: rotate(2deg);
      }

      55%,
      90% {
        transform: rotate(0deg);
      }
    }
  }
}
</style>
